import React, { Component } from 'react'
import PropTypes from 'prop-types'

class TodoItem extends Component {

    constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    shouldComponentUpdate(nextProps,nextState){ 
        if(nextProps.content !== this.props.content){
            return true;
        }else{
            return false; 
        }  
    }
 
    render() { 
       let {content,test} = this.props
        return (
            <div onClick={this.handleClick}> {test} -- {content} </div>
        ) 
    }
 
    handleClick(){ 
       let {deleteItem,index} = this.props
       deleteItem(index)
    }
    
}

// 参数校验
TodoItem.propTypes = {
    test:PropTypes.string.isRequired,    
    content: PropTypes.string,
    deleteItem:PropTypes.func, 
    index: PropTypes.oneOfType([PropTypes.number,PropTypes.string])
}

TodoItem.defaultProps = {
    test:'hello-word' 
}

export default  TodoItem